<template>
    <el-input v-model="title" placeholder="请输入，然后回车" @keyup.enter="add" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup (props) {
        const title = ref('')
        const add = ()=> {
            const text = title.value
            if(!text.trim()) return
            const todo = {
                id: Date.now(),
                title: text,
                isCompleted: false
            }
            // 调用addTodo方法
            props.addTodo(todo)

            title.value = ''
        }

        return {
            title,
            add
        }
    },
    props: {
        addTodo: {
            type: Function,
            required: true
        }
    }
})
</script>

<style scoped>

</style>